<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./src/vue.js"></script>
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .title {
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 20px;
        background-color: yellow;
      }
      .group_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        background-color: lightblue;
        padding: 0 10px;
      }
      .group_title > div:first-child {
        display: flex;
        align-items: center;
        height: 60px;
      }
      .friend_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        padding: 0 10px;
      }
      .v-enter {
        /* 提升优先级，否则 .v-enter 的优先级没有计算属性calcHeight的级别高，导致这个.v-enter初始状态不生效 */
        height: 0 !important;
      }
      .v-enter-active {
        transition: all 0.5s;
      }
      .v-leave-active {
        transition: all 0.5s;
      }
      .v-leave-to {
        height: 0;
      }
      .lists {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 class="title">好友列表</h1>
      <!-- 分组列表 -->
      <div class="main">
        <list_groups
          :group-info="group"
          v-for="group in users"
          :key="group.id"
        ></list_groups>
      </div>
    </div>
    <template id="group">
      <div class="group">
        <!-- 展示 group_title 子组件 -->
        <group_title
          :name="groupInfo.name"
          :childrens="groupInfo.childrens"
          @setshow="setShow"
          :isshow="show"
        ></group_title>
        <!-- 展示 好友列表 -->
        <!-- v-for="item in groupInfo.childrens.sort((f1, f2) => f1.online && !f2.online && -1)" -->
        <!-- 在使用v-for的元素/组件上，不要使用v-show/v-if进行条件渲染，可以将条件渲染提升到外层的父元素上。 -->
        <transition>
          <div class="lists" :style="calcHeight" v-show="show">
            <friend_item
              v-for="item in sortChildrens"
              :key="item.id"
              :friend="item"
            ></friend_item>
          </div>
        </transition>
      </div>
    </template>
    <template id="group_title">
      <div class="group_title" @click="toggle">
        <div>
          <div class="arrow">&gt;</div>
          <div class="title_name">{{name}}</div>
        </div>
        <div class="count">
          {{childrens.filter(item => item.online ==
          true).length}}/{{childrens.length}}
        </div>
      </div>
    </template>
    <template id="friend_item">
      <div
        class="friend_item"
        :style="{backgroundColor:friend.online?'red':'gray'}"
      >
        <div>
          <h3>{{friend.name}}</h3>
          <p>{{friend.desc}}</p>
        </div>
        <div>{{friend.online?'在线':'离线'}}</div>
      </div>
    </template>
    <script>
      // 2. 分组组件
      const group_title = {
        template: "#group_title",
        data() {
          return {};
        },
        props: ["name", "childrens", "isshow"],
        methods: {
          toggle() {
            this.$emit("setshow", !this.isshow);
          },
        },
      };
      // 3. 还有列表小组件
      const friend_item = {
        template: "#friend_item",
        data() {
          return {};
        },
        props: ["friend"],
        methods: {},
      };
      // 1. 分组组件
      const list_groups = {
        template: "#group",
        data() {
          return {
            show: false,
          };
        },
        props: ["groupInfo"],
        methods: {
          setShow(bool) {
            this.show = bool;
          },
        },
        components: {
          group_title,
          friend_item,
        },
        computed: {
          sortChildrens() {
            // sort(第一个元素，第二个元素)：当元素1>元素2时，说明大值在前，小值在后。此时需要交换位置返回1，不需要交换返回-1.
            return this.groupInfo.childrens.sort((f1, f2) => {
              if (f1.online && !f2.online) {
                return -1;
              }
            });
          },
          calcHeight() {
            const h = this.show
              ? this.groupInfo.childrens.length * 100 + "px"
              : 0;
            return {
              height: h,
            };
          },
        },
      };

      const vm = new Vue({
        data: {
          users: [
            {
              name: "朋友",
              id: 100,
              childrens: [
                {
                  id: 101,
                  name: "小红1",
                  online: true,
                  desc: "好友一个",
                },
                {
                  id: 102,
                  name: "小红2",
                  online: false,
                  desc: "好友一个",
                },
                {
                  id: 103,
                  name: "小红3",
                  online: true,
                  desc: "好友一个",
                },
              ],
            },
            {
              name: "亲人",
              id: 200,
              childrens: [
                {
                  id: 201,
                  name: "小明1",
                  online: false,
                  desc: "好友一个",
                },
                {
                  id: 202,
                  name: "小明2",
                  online: false,
                  desc: "好友一个",
                },
                {
                  id: 203,
                  name: "小明3",
                  online: true,
                  desc: "好友一个",
                },
              ],
            },
          ],
        },
        el: "#app",
        methods: {},
        components: {
          list_groups,
        },
      });
    </script>
  </body>
</html>
